<template>
  <a-row :gutter="16">
    <!-- 左侧: 监测类型选择区域 -->
    <a-col span="6">
      <a-card title="监测类型选择" class="select">
        <a-checkbox-group v-model="selectedCategories">
          <a-checkbox value="水质">水质</a-checkbox>
          <a-checkbox value="空气">空气</a-checkbox>
          <a-checkbox value="噪声">噪声</a-checkbox>
          <a-checkbox value="土壤">土壤</a-checkbox>
          <a-checkbox value="特殊污染物">特殊污染物</a-checkbox>
        </a-checkbox-group>
      </a-card>
    </a-col>

    <!-- 右侧: 空间分布分析区域 -->
    <a-col span="18">
      <a-card title="空间分布分析" style="height: 800px; margin-bottom: 20px">
        <!-- 地图显示区域 -->
        <div class="map-container">
          <!-- <Echart :option="mapChartOptions" name="mapChartOptions" /> -->
          <Map :height="mapheight" />
        </div>
      </a-card>
      <!-- 采集数据列表 -->
      <a-card title="采集数据列表">
        <a-table
          :columns="columns"
          :dataSource="dataList"
          rowKey="id"
          :row-selection="{ selectedRowKeys: selectedRowKeys }"
        >
        </a-table>
      </a-card>
    </a-col>
  </a-row>
</template>

<script setup>
import { computed, ref } from "vue";
// import MapComponent from '/@/components/MapComponent.vue'; // 确保路径正确
import Map from "/@/components/map.vue";
// 监测类型选择
const selectedCategories = ref([]);
const mapheight = 500;
// 采集数据列表
const dataList = ref([
  { id: 1, name: "监测点A", type: "水质", threshold: 100, radius: 50, selected: false },
  { id: 2, name: "监测点B", type: "水质", threshold: 120, radius: 60, selected: false },
  { id: 3, name: "监测点C", type: "空气", threshold: 80, radius: 40, selected: false },
  { id: 4, name: "监测点D", type: "空气", threshold: 90, radius: 45, selected: false },
  { id: 5, name: "监测点E", type: "噪声", threshold: 75, radius: 30, selected: false },
  // 更多数据...
]);

// 表格列配置
const columns = [
  { title: "点名", dataIndex: "name", key: "name" },
  { title: "类型", dataIndex: "type", key: "type" },
  {
    title: "阈值",
    dataIndex: "threshold",
    key: "threshold",
  },
  {
    title: "半径",
    dataIndex: "radius",
    key: "radius",
  },
];

// 表格选择
const selectedRowKeys = ref();

// 双击编辑阈值和半径
const handleDoubleClick = (record, field) => {
  console.log(`双击编辑: ${field} ${record[field]}`);
  // 在这里可以处理双击编辑逻辑，修改阈值或半径
};

// 显示地图和数据列表
const showDataForCategory = (category) => {
  // 根据选择的监测类型，在地图上显示对应的监测点
  // 更新数据列表显示
  dataList.value = dataList.value.filter((item) => item.type === category);
};

const mapChartOptions = computed(() => {
  return {};
});
</script>

<style scoped>
.select {
  height: 920px;
}
.map-container {
  width: 100%;
  height: 600px;
}
.ant-checkbox-group {
  display: flex;
  flex-direction: column;
}
[class="map bmap-container"] {
  height: 700px !important;
}
</style>
